import * as React from 'react';
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Typography } from 'antd';
import './style.scss'
//comp
//state
import { WordNoteState } from './reducer';
import { MainInfoState } from '../MainInfo/reducer';
//action
import * as Action from './reducer'



const { Text } = Typography;
export interface WordNoteProps {
    state: WordNoteState
    mainInfoState: MainInfoState,

    fetch: typeof Action.fetch
    edit: typeof Action.edit

}

export const _WordNote: React.SFC<WordNoteProps> = (props) => {
    const { state, mainInfoState, fetch, edit } = props

    React.useEffect(() => {
        if (mainInfoState.word)
            fetch(mainInfoState.word)
    }, [fetch, mainInfoState.word])
    return (
        <div >
            <Text editable={{
                onChange: wordNoteValue => {
                    if (mainInfoState.word)
                        edit(mainInfoState.word, {
                            wordNoteId: state.dto.wordNoteId,
                            wordNoteValue,
                        });
                }
            }}>{state.dto.wordNoteValue}</Text>
        </div>);
}

const mapStateToProps = (state: RootState) => ({
    state: state.WordNoteState,
    mainInfoState: state.MainInfoState,
})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        fetch: Action.fetch,
        edit: Action.edit,
    }, dispatch)

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordNote = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordNote)

export default WordNote